<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>泥好！</title>
	<style>
		.top2 {
			width: 1500px;
			height: 700px;
			background-color: #afb2af;

			position: relative;
		}

		.top {
			background-color: #1c350e30;
			width: 800px;
			height: 500px;
			border-radius: 10px;
			margin: auto;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0
		}

		.top .top1 {
			width: 300px;
			margin: auto;
		}

		.top {
			background-image: url(666.jpg);
			background-size: cover;
		}
	</style>
	<script>
		function get_info() {
			var v = document.getElementsByName("wenshidu");//搜索所有名字为1的标签
			var xhr = new XMLHttpRequest();//创建对象
			var url = "";
			xhr.open("post", url, true);//post:请求方法  url:路径  true:设置为异步
			xhr.onreadystatechange = function ()//状态发生改变
			{
				if (xhr.readyState === 4 && xhr.status === 200) {
					var z = xhr.responseText;//响应正文
					//var x = z.split(",");//拼接
					v[0].value = x.split(",")[0];
					v[1].value = x.split(",")[1];
				
				}
			}
			xhr.send("modbus_get");//消息正文
		}
		function set_led_open() {
			var xhr = new XMLHttpRequest();//创建对象
			var url = "";
			xhr.open("post", url, true);//post:请求方法  url:路径  true:设置为异步
			xhr.send("modbus_set01");//消息正文
		}
		function set_led_close() {
			var xhr = new XMLHttpRequest();//创建对象
			var url = "";
			xhr.open("post", url, true);//post:请求方法  url:路径  true:设置为异步
			xhr.send("modbus_set00");//消息正文
		}
		function set_wuwuwu_open() {
			var xhr = new XMLHttpRequest();//创建对象
			var url = "";
			xhr.open("post", url, true);//post:请求方法  url:路径  true:设置为异步
			xhr.send("modbus_set=11");//消息正文	
		}
		function set_wuwuwu_close() {
			var xhr = new XMLHttpRequest();//创建对象
			var url = "";
			xhr.open("post", url, true);//post:请求方法  url:路径  true:设置为异步
			xhr.send("modbus_set=1,0");//消息正文
		}
	</script>
</head>

<body>
	<div class="top2">
		<div class="top">
			<div class="top1">
				<p align="center"><font color="red">信息采集</p>
				温度:&nbsp;
				<input type="text" name="wenshidu">
				<br>
				湿度:&nbsp;
				<input type="text" name="wenshidu">
				<input type="button" value="刷新" onclick="get_info()">
				<br>
				<!-- 灯:&nbsp;
				<input type="radio" name="2">
				<br>
				蜂鸣器:&nbsp;
				<input type="radio" name="wenshidu"> 
				<br> -->
					<p align="center"><font color="red">设备开关</p>
					<font color="red">LED灯:</font>
					<font color="red">NO</font><input type="radio" name="led" id="1" onclick="set_led_open()">
					<font color="red">OFF</font><input type="radio" name="led" id="2" checked="checked"
						onclick="set_led_close()">
					<br>
					<font color="red">蜂鸣器</font>
					<font color="red">NO</font><input type="radio" name="wuwuwu" id="3" onclick="set_wuwuwu_open()">
					<font color="red">OFF</font><input type="radio" name="wuwuwu" id="4" checked="checked"
						onclick="set_wuwuwu_close()">
			</div>
		</div>
	</div>
</body>

</html>